<template>
	<view style="background-color: #000;">
		<swiper :current="current" :circular="circular" vertical="true" @change="changeVideo" style="width: 100vw;height: 100vh;">
			<swiper-item v-for="(item,index) in videoList" :key="item.eid" @click="controlstoggle">
				<view v-if="current == index && item.url" class="size">
						<!-- :controls="false" -->
					<video
						class="size"
						:controls="false"
						autoplay
						:src="item.url"
						poster="https://file002.huamaobook.com/cover/20240210/9e0d2a2b1408.jpg"
						@timeupdate="timeupdate"
						@ended="ended"
					/>
					<view class="" style="position: fixed;bottom: 50rpx;color: #fff;">
						{{item.ename}}
					</view>
					<!-- 底部播放进度条 -->
					<view class="bottomSlider" :style="{backgroundImage: `linear-gradient(to right, #999 ${((currentTimeValue/durationValue)*100)}%, #333 0)`}"></view>
				</view>
				<!-- 视频封面 -->
				<view v-else class="size">
					<image class="size" src="https://file002.huamaobook.com/cover/20240210/9e0d2a2b1408.jpg" mode="aspectFill"></image>
				</view>
				<!-- 视频控制器 -->
				<view v-if="showControls">
					<view class="" style="position: absolute;right: 50rpx;top: 50%;color: #fff;">
						右边
					</view>
					<view class="" style="position: absolute;left: 50%;bottom:100rpx;color: #fff;">
						下边
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
	<uni-popup ref="payPopup" type="bottom" background-color="#fff">支付弹窗</uni-popup>
</template>

<script setup>
	import {
		loginApi,
		getVideoDramaApi,
		getNewVideoDramaApi
	} from '@/api/apis.js'
import { ref } from "vue";
	let params = {
		// cid: 5352,
		dramaNum: 5,
		eid: 24119,
		sid: 0,
		vid: 258,
		videoId: 258,
	}
	onLoad((options)=>{
		params.vid = options.vid
	})
	// 充值面包弹窗
	const payPopup = ref(null)
	//
	const videoList = ref([])
	//swiper是否循环
	const circular = ref(true)
	// swiper激活项
	const current = ref(1)
	//当前滑块跟上一个滑块的差
	let delta = null
	//是否自动播放结束
	let isFinish = false
	//视频控制器
	const showControls = ref(false)
	// const getVideoDrama = async ()=>{
	// 	const res = await getVideoDramaApi({vid:'252'})
	// }
	//播放进度
	const currentTimeValue = ref(0)
	//总播放时长
	const durationValue = ref(0)
	//切换控制器
	const controlstoggle = ()=>{
		showControls.value = !showControls.value
	}
	//swiper滑动
	const changeVideo = async ({detail:{current:index}})=>{
		params.eid  = videoList.value[index].eid
		params.dramaNum = videoList.value[index].episodeorder
		const res = await getNewVideoDrama()
		payPopup.value.open()
		videoList.value[index].url = res.buyVideoDrama.url
		//不是自动播放结束时
		if(!isFinish){
			delta = index - current.value;
			current.value = index; //同步下标
		}
		//关闭自动播放结束
		isFinish = false
		const operations = {
			'0':{ //当前滑块的index
				'-2': () => (videoList.value[1] = res.nextVideoDrama[2]),//上滑 2-0
				'-1': () => (videoList.value[2] = res.nextVideoDrama[0]),//下滑 1-0
			},
			'1':{  
				'1': () => (videoList.value[2] = res.nextVideoDrama[2]),//上滑 0-1
				'-1': () => (videoList.value[0] = res.nextVideoDrama[0]),//下滑 2-1
			},
			'2':{ 
				'1': () => (videoList.value[0] = res.nextVideoDrama[2]),//上滑 1-2
				'2': () => (videoList.value[1] = res.nextVideoDrama[0]),//下滑 0-2
			}
		}
		//operations[index] 映射的键  operations[index][delta] 映射的值
		if (operations[index] && operations[index][delta]) { //如果对象里面的函数存在
		    operations[index][delta](); //调用对象里面对应的函数
		}
	}
	//播放结束时调用
	const ended = ()=> {
		//需要判断下一集是否有数据
		isFinish = true //自动播放结束
		delta = (current.value + 1) % 3 - current.value
		current.value = (current.value + 1) % 3
	}
	//加载进度变化时触发
	const timeupdate = ({detail:{currentTime,duration}})=>{
		if(!durationValue.value) durationValue.value = duration
		currentTimeValue.value = currentTime
	}
	//获取单集数据
	const getNewVideoDrama = ()=>{
		return new Promise(async (resolve,reject)=>{
			const {data} = await getNewVideoDramaApi(params)
			const index = data.nextVideoDrama.findIndex(item=>item === "")
			if(index !== -1){
				data.nextVideoDrama.splice(index, 1);
				circular.value = false;
				current.value = index === 0 ? 0 : 1;
			}else{
				circular.value = true;
			}
			resolve(data)
		})
	}
	const getData = async ()=>{
		const res = await getNewVideoDrama()
		res.nextVideoDrama[current.value].url = res.buyVideoDrama.url
		videoList.value = res.nextVideoDrama
	}
	onMounted(()=>{
		// getVideoDrama()
		getData()
	})

</script>

<style lang="scss">
	.size{
		width: 100%;
		height: 100%;
	}
	.bottomSlider{
		height: 5rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		color: #fff;
	}
</style>
